<template>
    <div>
    <img src="https://fishandbearpaw.oss-cn-hangzhou.aliyuncs.com/systemImg/jdlogo.png">
    <el-row>
        <el-col :xs="3" :sm="6" :md="7" :lg="8">&nbsp;</el-col>
        <el-col :xs="16" :sm="12" :md="8" :lg="8">
        <el-container id="login">
            <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px">
                <el-form-item label="账号" prop="userName">
                    <el-input type="text" v-model="loginForm.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="loginForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
                </el-form-item>
                <el-form-item>
                    <router-link to="/register">没有账号?注册一个吧</router-link>
                </el-form-item>
            </el-form>
            </el-container>
        </el-col>
</el-row>
    </div>
</template>
<script>
export default {
  name: 'Login',
      data() {
      var checkUserName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入账号'));
        }
        else
         callback();
      };
      var checkPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }
        else
         callback();
      };
      return {
        loginForm: {
          userName: '',
          pass: ''
        },
        rules: {
          userName: [
            { validator: checkUserName, trigger: 'blur' }
          ],
          pass: [
            { validator: checkPass, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        var that = this;
        that.$refs[formName].validate((valid) => {
          if (valid) {
             that.$axios.post('user/login',that.loginForm).then(function(res){
               if(res.data.code == 200){
                  that.$session.set('USERNAME',res.data.body.userName);
                  that.$session.set('HEADPIC',res.data.body.headPic);
                  that.$session.set('USERID',res.data.body.id);
                   that.$message({
                   message: '登录成功',
                   type: 'success'
        });
              that.$router.push('/components/Main');
               }
                else{
                  that.$message.error('登录失败,账号或密码错误');
                }
    }).catch(function (error) {
        that.$message.error('登录失败,请检查网络是否通畅');
    });
          } else { 
            that.$message.error('登录失败,请将表单填写完整');
            return false;
          }
        });
      },
      resetForm(formName) {
        that.$refs[formName].resetFields();
      }
    }
}
</script>
<style >
body{
  text-align:center;
  background-image: url('https://fishandbearpaw.oss-cn-hangzhou.aliyuncs.com/systemImg/loginBack.jpg');
  background-size: cover;
  background-position: fixed;
  top:0;
  left:0;
  font: 14px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
  color: #4d4d4d;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
}
#login{
    background-image:url('https://fishandbearpaw.oss-cn-hangzhou.aliyuncs.com/systemImg/back2.png');
    background-repeat:no-repeat;
    margin-left:20px;
    padding-top:40px;
    padding-bottom:40px;
    text-align:center;
}
a {
    text-decoration:none;
    color:white;
}
</style>